<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.red {width:300px; height:200px; border:10px solid yellow; color:red;}
.yellow {width:200px; height:300px; border:10px solid red; color:yellow;}
</style>
<script>
window.onload = function (){
  var oP = document.getElementById('p1');
  var oBtn1 = document.getElementById('btn1');
  var oBtn2 = document.getElementById('btn2');
  oBtn1.onclick = function (){
    oP.className = 'red';
  };
  oBtn2.onclick = function (){
    oP.className = 'yellow';
  }
}
</script>
</head>
<body>
<input id="btn1"type="button" value="红色">
<input id="btn2"type="button" value="黄色">
<p id="p1">

· 在JS中 递增 num = num + 1;   >>>   num ++   

  【空格多少是没有影响的，比如num    ++    ;但是两个加号之间不能有空格】

   递增不是1个数字时，比如 num = num + 10;  >>>  num += 10;

· JS是不允许元素有"-"出现的，需要去掉"-"同时下一个字母大写，即如下font-size形式：

   var num = 12;

   num ++;

   oDiv.style.fontSize = num + 'px'; </p>
</body>
</html>
